<template>
  <el-container class="container">
    <el-aside class="aside">
      <sender-ele class="sender" :is-sender="isSender()" :contact="contact" />
      <div v-if="isSender()">
        <div class="user-name">{{accountStore.user.name}}</div>
      </div>
      <div v-else>
        <div class="user-name">{{contact.user.name}}</div>
        <div class="enterprise-role" v-if="contact.enterprise.enterprise_id !== undefined">{{contact.enterprise.enterprise_name}} | {{contact.enterprise.is_admin ? "HR" : "职员"}}</div>
      </div>
    </el-aside>
    <el-main class="main">
      <message-ele :message="message" :is-sender="isSender()" />
      <div class="send-time">{{message.send_time}}</div>
    </el-main>
  </el-container>
</template>

<script>
import {useAccountStore} from "@/stores/account";
import SenderEle from "@/views/ChatView/MessageEle/SenderEle.vue";
import MessageEle from "@/views/ChatView/MessageEle/MessageEle.vue";

export default {
  name: "SenderMessageEle",
  components: {MessageEle, SenderEle},
  props: {
    message: {
      type: Object,
    },
    contact: {
      type: Object,
    }
  },
  data() {
    return {
      accountStore: useAccountStore(),
    }
  },
  methods: {
    isSender() {
      return this.accountStore.user.id === this.message.sender_id;
    }
  }
}
</script>

<style scoped>
.container {
  margin: 10px 0 10px 0;
}
.aside {
  width: 70px;
  overflow: hidden;
}
.main {
  padding: 0;
  overflow: hidden;
}
.sender {
  margin: 0 0 0 15px;
  text-align: center;
}
.user-name {
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  text-align: center;
}
.enterprise-role {
  font-size: 10px;
  height: 12px;
  line-height: 12px;
  text-align: center;
}
.send-time {
  color: #909399;
  font-size: 12px;
  line-height: 15px;
}
</style>